<template>
  <div class="_wz_cent_main _wz_form">

    <div style="height: calc(100% - 53px);">
      <div style="height: 100%;overflow: auto;padding: 10px;">
        <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
          <FormItem label="id"  prop="id">
            <i-input v-model="formData.id" placeholder="--" clearable />
          </FormItem>
          <FormItem label="宽(单位px)"  prop="width">
            <i-input v-model.number="formData.width" placeholder="--" clearable />
          </FormItem>
          <FormItem label="高(单位px)"  prop="height">
            <i-input v-model.number="formData.height" placeholder="--" clearable />
          </FormItem>
          <FormItem label="颜色组">
            <div class="_wz_colors">
              <template v-for="(item,index) in formData.colors">
                <ColorPicker v-model="formData.colors[index]" size="small" alpha />
              </template>
            </div>
          </FormItem>
          <FormItem label="色系"  prop="colorSystem">
            <i-select v-model.number="formData.colorSystem" filterable placeholder="--" clearable @on-change="colorSystemFun">
              <Option :value="0">浅色</Option>
              <Option :value="1">深色</Option>
              <Option :value="2">自定义</Option>
            </i-select>
          </FormItem>
          <template v-if="formData.colorSystem == 2">
            <FormItem label="背景颜色">
              <ColorPicker v-model="formData.backColor" size="small" alpha />
            </FormItem>
            <FormItem label="X线颜色">
              <ColorPicker v-model="formData.xColor" size="small" alpha />
            </FormItem>
            <FormItem label="Y线颜色">
              <ColorPicker v-model="formData.yColor" size="small" alpha />
            </FormItem>
            <FormItem label="图例文字颜色">
              <ColorPicker v-model="formData.legendColor" size="small" alpha />
            </FormItem>
          </template>

          <FormItem label="X线条隐藏">
            <i-switch v-model="formData.xShow" size="large">
              <template #open><span>显示</span></template>
              <template #close><span>隐藏</span></template>
            </i-switch>
          </FormItem>
          <FormItem label="Y线条隐藏">
            <i-switch v-model="formData.yShow" size="large">
              <template #open><span>显示</span></template>
              <template #close><span>隐藏</span></template>
            </i-switch>
          </FormItem>
          <FormItem label="图例位置" prop="legend">
            <i-select v-model.number="formData.legend" filterable placeholder="--" clearable>
              <Option :value="0">隐藏</Option>
              <Option :value="1">上居中</Option>
              <Option :value="2">上居右</Option>
              <Option :value="3">上居左</Option>
              <Option :value="4">下居中</Option>
              <Option :value="5">下居右</Option>
              <Option :value="6">下居左</Option>
              <Option :value="7">左居中</Option>
              <Option :value="8">左居上</Option>
              <Option :value="9">左居下</Option>
              <Option :value="10">右居中</Option>
              <Option :value="11">右居上</Option>
              <Option :value="12">右居下</Option>
            </i-select>
          </FormItem>

          <FormItem label="边距">
            <Row>
              <Col span="6" style="text-align: center;">上</Col>
              <Col span="6" style="text-align: center;">右</Col>
              <Col span="6" style="text-align: center;">下</Col>
              <Col span="6" style="text-align: center;">左</Col>
            </Row>
            <Row>
              <Col span="6">
                <i-input v-model.number="formData.top" placeholder="--" clearable />
              </Col>
              <Col span="6">
                <i-input v-model.number="formData.right" placeholder="--" clearable />
              </Col>
              <Col span="6">
                <i-input v-model.number="formData.bottom" placeholder="--" clearable />
              </Col>
              <Col span="6">
                <i-input v-model.number="formData.left" placeholder="--" clearable />
              </Col>
            </Row>
          </FormItem>
          <FormItem label="边距单位">
            <i-select v-model="formData.marginUnit" filterable placeholder="--" clearable>
              <Option value="%">%</Option>
              <Option value="px">px</Option>
            </i-select>
          </FormItem>
          <FormItem label="堆叠、平铺">
            <i-select v-model="formData.stackingTiling" filterable placeholder="--" clearable>
              <Option value="Total">堆叠</Option>
              <Option value="Tiling">平铺</Option>
            </i-select>

          </FormItem>
          <FormItem label="柱子大小">
            <i-input v-model.number="formData.size" placeholder="--" clearable />
          </FormItem>
          <FormItem label="子柱子间隙" v-if="formData.stackingTiling == 'Tiling'">
            <i-input v-model.number="formData.barGap" placeholder="--" clearable />
          </FormItem>
          <FormItem label="每组柱子间隙">
            <i-input v-model.number="formData.barCategoryGap" placeholder="--" clearable />
          </FormItem>
          <FormItem label="是否带背景">
            <i-switch v-model="formData.showBackground" size="large">
              <template #open><span>是</span></template>
              <template #close><span>否</span></template>
            </i-switch>

          </FormItem>
          <FormItem label="平均值">
            <i-switch v-model="formData.markLine" size="large">
              <template #open><span>是</span></template>
              <template #close><span>否</span></template>
            </i-switch>
          </FormItem>
          <FormItem label="最大最小标记">
            <i-switch v-model="formData.markPoint" size="large">
              <template #open><span>是</span></template>
              <template #close><span>否</span></template>
            </i-switch>
          </FormItem>

          <Divider>
            数据
            <Tooltip content="添加类型">
              <Icon type="ios-add-circle" style="cursor: pointer;font-size: 20px;color: #2d8cf0;" @click="formData.dataList.push({type:'',dataList:[{name:'',value:''}]})"/>
            </Tooltip>

          </Divider>


          <Form label-position="right" :label-width="60">
            <template v-for="(item,index) in formData.dataList">
              <div style="margin: 5px 0;">
                <Row>
                  <Col span="20">
                    <FormItem label="类型">
                      <i-input v-model="item.type" placeholder="--" clearable />
                    </FormItem>
                  </Col>
                  <Col span="4" style="line-height: 32px;text-align: center;">
                    <Tooltip content="添加子数据">
                      <Icon type="ios-add-circle" style="cursor: pointer;font-size: 20px;color: #2d8cf0;" @click="item.dataList.push({name:'',value:''})"/>
                      <Icon type="md-trash" style="color: #ed4014;cursor: pointer;font-size: 20px;" v-if="index != 0 || formData.dataList.length > 1" @click="formData.dataList.splice(index,1);"/>
                    </Tooltip>
                  </Col>
                </Row>
                <Row>
                  <template v-for="(items,indexs) in item.dataList">
                    <Col span="10">
                      <FormItem label="名称">
                        <i-input v-model="items.name" placeholder="--" clearable/>
                      </FormItem>
                    </Col>
                    <Col span="10">
                      <FormItem label="数值">
                        <i-input v-model.number="items.value" placeholder="--" search enter-button="随机" @on-search="items.value = Math.floor(Math.random() * (100 - 1)) + 1"/>
                      </FormItem>
                    </Col>
                    <Col span="4" style="line-height: 32px;text-align: center;">
                      <Icon type="md-trash" style="color: #ed4014;cursor: pointer;font-size: 20px;" v-if="indexs != 0 || item.dataList.length > 1" @click="item.dataList.splice(indexs,1);"/>
                    </Col>
                  </template>
                </Row>
              </div>
            </template>
          </Form>

        </Form>
      </div>
    </div>
    <div class="demo-drawer-footer" style="z-index: 5;">
      <Button type="primary" style="margin-right: 8px" @click="addSubmit('formAdd')">确定</Button>
      <Button @click="">重置</Button>
    </div>
  </div>
</template>
<script>



import { mapState, mapActions } from 'vuex'
import charts from '../lineChart/charts.vue'
export default {
  components: {charts},
  props: [],//接收来自父组件的数据
  data() {
    return {
      color: '#19be6b',
      ruleValidate:{
        id: [
          {required: true, message: '请输入id', trigger: 'blur'}
        ],
        width: [
          {type:'number',required: true, message: '请输入宽度', trigger: 'blur'}
        ],
        height: [
          {type:'number',required: true, message: '请输入高度', trigger: 'blur'}
        ],
        legend: [
          {type:'number',required: true, message: '请选择图例位置', trigger: 'blur'}
        ],
        marginUnit: [
          {required: true, message: '请输入边距单位', trigger: 'blur'}
        ],
        colorSystem: [
          {type:'number',required: true, message: '请选择色系', trigger: 'blur'}
        ],
      },
      formData:{
        id:'barChart',
        width:500,
        height:500,
        colors:[ '#2d8cf0', '#19be6b', '#ff9900', '#ed4014', '#9b66e6', '#3fcece', '#4b588d', '#b7b83f', '#b9783f',"#4efd95", "#2ebdcc", "#375397", "#22597e", "#2e33d1", "#3bd2a6","#95CEFF", "#A9FF96", "#FFBC75", "#AAFFFA", "#999EFF", "#FF7599", "#FDEC6D", "#44A9A8", "#2D8CF0"],
        xColor:'#000',
        yColor:'#000',
        xShow:true,
        yShow:true,
        backColor:'#fff',
        legendColor:'#ccc',
        colorSystem:0,
        dataList:[
          {
            type:'类型1',dataList:[
              {name:'名称1',value:20}, {name:'名称2',value:77}, {name:'名称3',value:70}, {name:'名称4',value:22}, {name:'名称5',value:24}, {name:'名称6',value:43}, {name:'名称7',value:49},
            ]
          },
          {
            type:'类型2',dataList:[
              {name:'名称1',value:96}, {name:'名称2',value:62}, {name:'名称3',value:87}, {name:'名称4',value:93}, {name:'名称5',value:93}, {name:'名称6',value:51}, {name:'名称7',value:13},
            ]
          },
        ],
        legend:1,
        marginUnit:'%',
        top : 10,
        right : 10,
        bottom : 10,
        left : 10,
        chartsClick : (data)=>{ //点击事件
          console.log(data,222222222222);
          console.log('名称' + data.name);
          console.log('类型' + data.seriesName);
          console.log('数据' + data.data);

        },
      },
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

  },
  methods: {//执行的方法
    //色系操作
    colorSystemFun(){
      let that = this;
      if(that.formData.colorSystem == 0){//浅色
        that.formData.backColor = '#fff';
        that.formData.xColor = '#000';
        that.formData.yColor = '#000';
        that.formData.legendColor = '#000';
      }else if(that.formData.colorSystem == 1){//深色
        that.formData.backColor = '#000';
        that.formData.xColor = '#fff';
        that.formData.yColor = '#fff';
        that.formData.legendColor = '#fff';
      }

    },
    //提交表单
    addSubmit(data) {
      var that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使用
          let obj = JSON.parse(JSON.stringify(that.formData));
          let dataList = [];
          obj.dataList.forEach(function(k,i){
            k.dataList.forEach(function(ko,io){
              var dataObj = {type:k.type}
              dataObj.name = ko.name;
              dataObj.value = ko.value;
              dataList.push(dataObj);
            })
          })
          obj.dataList = dataList;
          obj.chartsClick = that.formData.chartsClick;
          that.$emit("parentFun", obj)
        } else {
          that.$Message.error({content: "请正确填写表单", duration: 5});
        }
      })
    }
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_form{
  width: 100%;
  height: 100%;

  ._wz_colors{
    height: 34px;display: flex;align-items: center;justify-content: space-between;
    .ivu-color-picker{
      .ivu-input{
        border: 0px;
      }
      .ivu-input-small{
        padding: 0px;
      }
      i{
        display: none;
      }
    }
  }
}
</style>
